<template>
  <div style="padding: 10px; width: 100%;">
<!--    功能区域-->
    <div style="margin: 10px 0;">
      <el-button type="primary" @click="add">新增</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="primary">导出</el-button>
    </div>

<!--    搜索区域-->
    <div style="margin: 10px 0">
      <el-input v-model="search" placeholder="请输入关键字" style="width: 20%;" clearable/>
      <el-button type="primary" style="margin: 10px;" @click="load">查询</el-button>
    </div>
    <el-table
        :data="tableData"
        stripe
        style="width: 100%">
      <el-table-column
          prop="id"
          label="ID">
      </el-table-column>
      <el-table-column
          prop="username"
          label="用户名">
      </el-table-column>
      <el-table-column
          prop="nickName"
          label="昵称">
      </el-table-column>
      <el-table-column
          prop="age"
          label="年龄">
      </el-table-column>
      <el-table-column
          prop="sex"
          label="性别">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.row)">编辑</el-button>

<!--          <el-popover-->
<!--              placement="top"-->
<!--              width="160"-->
<!--              v-model="visible">-->
<!--            <p>确定删除吗？</p>-->
<!--            <div style="text-align: right; margin: 0">-->
<!--              <el-button size="mini" type="text" @click="visible = false">取消</el-button>-->
<!--              <el-button type="primary" size="mini" @click="visible = false">确定</el-button>-->
<!--            </div>-->
<!--            <el-button slot="reference" size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)" style="margin-left:10px;">删除</el-button>-->
<!--          </el-popover>-->
          <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
            <el-button slot="reference" size="mini" type="danger" style="margin-left:10px;">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin-top:10px;">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5,10,20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
      <!--    新增对话框-->
      <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="50%"
          :before-close="handleClose">
        <!--对话框内表单-->
        <el-form ref="form" :model="form" label-width="180px">
          <el-form-item label="用户名" style="width:80%">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="昵称" style="width:80%">
            <el-input v-model="form.nickName"></el-input>
          </el-form-item>
          <el-form-item label="年龄" style="width:80%">
            <el-input v-model="form.age"></el-input>
          </el-form-item>
          <el-form-item label="性别" style="width:80%">
            <el-radio v-model="form.sex" label="男">男</el-radio>
            <el-radio v-model="form.sex" label="女">女</el-radio>
            <el-radio v-model="form.sex" label="未知">未知</el-radio>
          </el-form-item>
          <el-form-item label="地址" style="width:80%">
            <el-input type="textarea" v-model="form.address"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
</template>

<script>

import request from "../utils/request";

export default {
  name: 'Home',
  data() {
    return {
      //表格数据
      tableData: [],
      visible: false,
    //  当前页
      currentPage:1,
      pageSize: 10,
      total:0,
      //新增对话框
      dialogVisible: false,
      form:{},
      //搜索内容
      search:'',
    }
  },

  created(){
    this.load()
  },

  methods:{
    load(){
      request.get("/api/user",{
        params:{
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        console.log(res)
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    //新增按钮打开对话框
    add(){
      this.dialogVisible = true
      this.form = {}
    },

    //确定新增
    save(){
      if(this.form.id){ //更新
        request.put("/api/user",this.form).then(res => {
          console.log(res)
          if(res.code === '0'){
            this.$message({
              type: "success",
              message: "修改成功"
            })
          }else{
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.load()
          this.dialogVisible = false
        })
      }else{ //新增
        request.post("/api/user",this.form).then(res => {
          console.log(res)
          if(res.code === '0'){
            this.$message({
              type: "success",
              message: "新增成功"
            })
          }else{
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.load()
          this.dialogVisible = false
        })
      }

    },

    //关闭对话框
    handleClose(){
      this.dialogVisible = false
    },

    //修改按钮
    handleEdit(row){
      //深拷贝
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
    },

    //删除按钮
    handleDelete(id){
      console.log(id)
      request.delete("/api/user/" + id).then(res => {
        if(res.code === '0'){
          this.$message({
            type: "success",
            message:"删除成功"
          })
        }else{
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        this.load() //删除之后，重新加载表格的数据
      })
    },

    //改变当前页数据数量时触发
    handleSizeChange(pageSize){
      this.pageSize = pageSize
      this.load()
    },

    //更改当前页时触发
    handleCurrentChange(pageNum){
      this.currentPage = pageNum
      this.load()
    }

  }
}
</script>
